<%@ page import="cn.school.mybatis.pojo.Grade" %>
<%@ page import="java.util.List" %>
<%@ page import="cn.school.mybatis.service.GradeService" %>

<%--
  Created by IntelliJ IDEA.
  User: zhaoyang
  Date: 2020/8/3
  Time: 5:40 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>学校管理系统</title>

    <link rel="icon"
          href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596120245889&di=5093bcb814a73039583d935c56ee7213&imgtype=0&src=http%3A%2F%2Fen.pimg.jp%2F041%2F867%2F367%2F1%2F41867367.jpg"/>

    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- 页面头部引用 -->
    <%@include file="../pageHeadLink.jsp"%>
    <!-- 页面头部引用 /-->
</head>

<body class="hold-transition skin-purple sidebar-mini">

<div class="wrapper">

    <!-- 页面头部 -->
    <%@include file="../pageHead.jsp"%>
    <!-- 页面头部 /-->

    <!-- 导航侧栏 -->
    <%@include file="../pageLeft.jsp"%>
    <!-- 导航侧栏 /-->

    <!-- 内容区域 -->
    <!-- @@master = admin-layout.html-->
    <!-- @@block = content -->

    <div class="content-wrapper">

        <!-- 内容头部 -->
        <section class="content-header">
            <h1>
                学生信息管理
                <small>增加学生信息</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">学生信息管理</a></li>
                <li class="active">增加学生信息</li>
            </ol>
        </section>
        <!-- 内容头部 /-->

        <!-- 正文区域 -->
        <section class="content">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">欢迎登陆学校信息后台管理系统</h3>
                </div>

                <div class="box-body">

                    您可以在这里输入并增加学生信息<br> 如果需要帮助的话请点击侧边栏下方的帮助文档

                </div>
                <!--输入栏-->
                <!-- general form elements -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">增加学生信息</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
<%--                    <form role="form" action="doAddStudent.jsp" method="post" enctype="multipart/form-data">--%>
                    <form role="form" action="${pageContext.request.contextPath}/StudentAddServlet" method="post" enctype="multipart/form-data">
                        <div class="box-body">

                            <!--基础控件-->
                            <div class="tab-pane" id="tab-common">
                                <div class="row data-type">
                                    <div class="col-md-2 title">请输入新的学生姓名：</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user-plus"></i></span>
                                            <input type="text" class="form-control" placeholder="新的学生姓名" name="stuName">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">新的学生性别</div>
                                    <div class="col-md-4 data">
                                        <div class="form-group form-inline" style="margin-left: 12px">
                                            <div class="radio"><label><input type="radio" name="stuSex" value="男"
                                                                             checked> 男</label></div>
                                            <div class="radio"><label><input type="radio" name="stuSex" value="女">
                                                女</label></div>
                                            <div class="radio"><label><input type="radio" name="stuSex" value="妖">
                                                妖</label></div>
                                            <div class="radio"><label><input type="radio" name="stuSex" value="人妖">
                                                人妖</label></div>
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">请输入新的学生电话：</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-address-book"></i></span>
                                            <input type="text" class="form-control" placeholder="新的学生电话"
                                                   name="stuPhone" id="telephone">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">请输入新的学生QQ：</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-qq"></i></span>
                                            <input type="text" class="form-control" placeholder="新的学生QQ" name="stuQQ">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">请输入新的学生微信：</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-weixin"></i></span>
                                            <input type="text" class="form-control"  onblur="checkWechat(this)" placeholder="新的学生微信"
                                                   name="stuWechat">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">新的学生年级</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-sitemap"></i></span>
                                            <select class="form-control select2" style="width: 100%;" name="stuGrade">
                                                <option disabled="disabled" selected="selected">请选择学生年级</option>
                                                <%
                                                    List<Grade> lists = GradeService.GRADE_SERVICE.searchAll();
                                                    for (Grade g : lists) {
                                                %>
                                                <option value="<%=g.getId()%>"><%=g.getId()%>-<%=g.getGname()%>
                                                </option>
                                                <%
                                                    }
                                                %>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">入学日期:</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar-check-o"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right datepicker"
                                                   name="enterTime">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">学生生日:</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-birthday-cake"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right datepicker"
                                                   name="stuBirth">
                                        </div>
                                    </div>

                                    <div class="col-md-2 title">请输入学生来自城市：</div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-home"></i></span>
                                            <input type="text" class="form-control" placeholder="学生来自城市"
                                                   name="fromCity">
                                        </div>
                                    </div>
                                    <%--空白占位div--%>
                                    <div class="col-md-2 title"></div>
                                    <div class="col-md-4 data">
                                        <div class="input-group">
                                            <%--<span class="input-group-addon"><i class="fa fa-address-book"></i></span>--%>
                                            <%--<input type="text" class="form-control" placeholder="学生来自城市">--%>
                                        </div>
                                    </div>
                                    <%--/空白占位div--%>

                                    <div class="col-md-2 title rowHeight2x">新的学生地址：</div>
                                    <div class="col-md-10 data rowHeight2x">
                                        <textarea class="form-control" rows="3" placeholder="请输入新的学生地址..."
                                                  name="stuAddr"></textarea>
                                    </div>


                                    <%--<div class="col-md-2 title">新的学生密码</div>--%>
                                    <%--<div class="col-md-4 data">--%>
                                    <%--<input type="password" class="form-control" placeholder="新的学生密码" value="">--%>
                                    <%--</div>--%>


                                    <%--照片div--%>
                                    <div class="col-md-2 title" style="height: available">照片上传</div>
                                    <div class="col-md-10 data" style="height: auto">
                                        <a href="javascript:;" class="a-upload" style="float: left">
                                            <input type="file" name="stuImg" onchange="viewImage(this)">点击这里上传照片
                                        </a>
                                        <div id="localImag" style="margin-left: 170px"><img id="preview" style="diplay:none"/>
                                        </div>
                                    </div>
                                    <%--/照片div--%>


                                    <div class="col-md-2 title"></div>
                                    <div class="col-md-10 data text-center">
                                        <button type="submit" class="btn bg-maroon" id="BtnAdd">增加学生</button>
                                        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回上一级
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!--基础控件/-->
                    </form>
                </div>
                <!-- /.box -->

            </div>

        </section>
        <!-- 正文区域 /-->

    </div>
    <!-- @@close -->
    <!-- 内容区域 /-->

    <!-- 底部导航 -->
    <%@include file="../pageBottom.jsp"%>
    <!-- 底部导航 /-->

</div>

<!-- 页面尾部引用 -->
<%@include file="../pageBottomLink.jsp"%>
<!-- 页面尾部引用 /-->
<script>
    function createAjax(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    function checkWechat(p){
        // alert(p.value);
        if (p.value==""){
            return false;
        }
        let xhr=createAjax();
        let url="${pageContext.request.contextPath}/checkWechatServlet?wechat="+p.value;
        // alert(url);
        xhr.onreadystatechange=function () {
            // alert(xhr.readyState+"=>>"+xhr.status);
            if (xhr.readyState==4&&xhr.status==200){
                // alert(xhr.responseText);
                //服务器返回TRUE表示重复
                if (xhr.responseText=="true"){
                    alert("此微信已被占用！");
                    document.getElementById("BtnAdd").disabled=true;
                }else {
                    alert("此微信可用！");
                    document.getElementById("BtnAdd").disabled=false;
                }
            }
        }
        xhr.open("GET",url,true);
        xhr.send(null);
    }

    $(document).ready(function () {
        //jQuery.ajax()实现Ajax请求
        // $("#telephone").blur(function () {
        $(":input[name=stuPhone]").blur(function () {
            var telephone=this.value;
            let t=this;
            if (telephone==""||telephone==null){
                return false;
            }
            let url="${pageContext.request.contextPath}/checkTeleServlet?telephone="+telephone;
            $.ajax({
                "url":"${pageContext.request.contextPath}/checkTeleServlet",
                "type":"GET",
                // "data":"telephone="+telephone,
                "data":{"telephone":telephone},
                "dataType":"text",
                "success":function (data) {
                    // $(t).next().html(data="true"?"重复了":"可以使用");
                    // alert(url);
                    if (data=="true"){
                        alert("此电话已被占用！");
                        $("#BtnAdd").prop("disabled",true);
                        // $("#BtnAdd").prop("disabled",data=="true");
                    }else {
                        alert("此电话可用！");
                        $("#BtnAdd").prop("disabled",false);
                    }
                },
                "error":function () {
                    alert("验证出现错误，请稍后重试....")
                },
            })


        });

        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });


    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }

    //Date picker
    $('.datepicker').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
    });

    // // datetime picker
    // $('#dateTimePicker').datetimepicker({
    //     format: 'MM/DD/YYYY hh:mm A'
    // });

    $(document).ready(function () {
        setSidebarActive("addStu");
    });

    //上传图片后预览图片
    function viewImage(file) {
        var preview = document.getElementById('preview');
        if (file.files && file.files[0]) {
            //火狐下
            preview.style.display = "block";
            preview.style.width = "300px";
            preview.style.height = "120px";
            preview.src = window.URL.createObjectURL(file.files[0]);
        } else {
            //ie下，使用滤镜
            file.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "20%";
            localImagId.style.height = "20%";
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                locem("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            preview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }


</script>
</body>

</html>
